<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}" @getUserInfo="getUserInfo" @myLogin="myLogin" @getPhoneNumber="getPhoneNumber" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox" @navigatorClick="navigatorClick"></comp-common>
			<comp-header v-bind="{data:data}" @relevanceError="relevanceError" @relevanceSuccess="relevanceSuccess"></comp-header>
			<view class="body after-navber">
				<view class="after-navber">
            <view class="background" style="z-index:0;" :style="'background-image: url('+data.page_img.bg+')'"></view>
            <view @tap="showRule" class="rule-btn">活动规则</view>
            <view :class="['rule-bg', data.showRule?'show':'']"></view>
            <view :class="['rule-content', data.showRule?'show':'']">
                <view @tap="closeRule" class="rule-close">
                    <image :src="data.page_img.close"></image>
                </view>
                <view class="rule-text">
                    <view class="rule-title">-拆红包活动规则-</view>
                    <text>{{data.rule}}</text>
                </view>
            </view>
            <view class="hongbao" :style="'background-image: url('+data.page_img.hongbao_bg+')'" v-if="data.coupon_total_money">
                <form @submit="openHongbao" class="hongbao-content" reportSubmit="true">
                    <view class="hongbao-desc">
                        <view>{{data.coupon_total_money}}元红包已包好</view>
                        <view>快拆开和小伙伴分享红包</view>
                    </view>
                    <button class="open-hongbao-btn" formType="submit" hoverClass="none" :style="'background-image: url('+data.page_img.open_hongbao_btn+')'">领取
                    </button>
                </form>
            </view>
        </view>
			</view>
			<comp-footer v-bind="{data:data}"></comp-footer>
		</view>
	</view>
</template>

<script>var myVue = {};
	export default {
		data() {
			return {
				data: {
        page_img: {
            bg: this.getApp.webRoot + "/statics/images/fxhb/bg.png",
            close: this.getApp.webRoot + "/statics/images/fxhb/close.png",
            hongbao_bg: this.getApp.webRoot + "/statics/images/fxhb/hongbao_bg.png",
            open_hongbao_btn: this.getApp.webRoot + "/statics/images/fxhb/open_hongbao_btn.png"
        }
    },
			};
		},
		onLoad: function(e) {myVue = this;
        var o = this;
        myVue.getApp.page.onLoad(this, e), myVue.getApp.core.showLoading({
            title: "加载中",
            mask: !0
        }), myVue.getApp.request({
            url: myVue.getApp.api.fxhb.open,
            success: function(e) {
                o.getApp.core.hideLoading(), 0 == e.code && (e.data.hongbao_id ? o.getApp.core.redirectTo({
                    url: "/pages/fxhb/detail/detail?id=" + e.data.hongbao_id
                }) : o.setData(e.data)), 1 == e.code && o.getApp.core.showModal({
                    content: e.msg,
                    showCancel: !1,
                    success: function(e) {
                        e.confirm && o.getApp.core.redirectTo({
                            url: "/pages/index/index"
                        });
                    }
                });
            }
        }),console.log(myVue);
    },
    onReady: function() {
        myVue.getApp.page.onReady(this);
    },
    onShow: function() {
        myVue.getApp.page.onShow(this);
    },
		methods: {
			showRule: function() {
        this.setData({
            showRule: !0
        });
    },
    closeRule: function() {
        this.setData({
            showRule: !1
        });
    },
    openHongbao: function(e) {
			var _this = this;
        myVue.getApp.core.showLoading({
            title: "抢红包中",
            mask: !0
        }), myVue.getApp.request({
            url: myVue.getApp.api.fxhb.open_submit,
            method: "post",
            data: {
                form_id: e.detail.formId
            },
            success: function(e) {
                0 == e.code ? myVue.getApp.core.redirectTo({
                    url: "/pages/fxhb/detail/detail?id=" + e.data.hongbao_id
                }) : (myVue.getApp.core.hideLoading(), myVue.getApp.core.showModal({
                    content: e.msg,
                    showCancel: !1
                }));
            }
        });
    }
		},
	}
</script>

<style scoped>
@import "../../../__wuBaseWxss__/19.css";

.hongbao {
    position: fixed;
    width: 600upx;
    left: 74upx;
    right: 74upx;
    bottom: calc(150upx + var(--window-bottom));
    height: 722upx;
    z-index: 1;
    background-size: 100% 100%;
}

.hongbao-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.hongbao-content {
    position: relative;
    text-align: center;
    display: block;
    padding: 350upx 25upx 0 25upx;
}

.hongbao-desc {
    margin-bottom: 100upx;
    line-height: 1.5;
    color: #ffd212;
    font-size: 13pt;
}

.open-hongbao-btn {
    display: block;
    color: #ff2c32;
    text-align: center;
    margin: 0 auto;
    transition: opacity 50ms;
    background: none;
    border: none;
    height: 96upx;
    line-height: 96upx;
    width: 416upx;
    box-shadow: none;
    background-size: 100% 100%;
    font-weight: 400;
}

.open-hongbao-btn:after {
    display: none;
}

.open-hongbao-btn:active {
    opacity: .75;
}
</style>
